<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="<?php echo PATH?>/web/css/ui.jqgrid.css">
	<link rel="stylesheet" type="text/css" href="<?php echo PATH?>/web/css/pepper-grinder/jquery-ui-1.10.3.custom.css">
	<link rel="stylesheet" type="text/css" href="<?php echo PATH?>/web/css/styles.css"/>
	
	<script type="text/javascript" src="<?php echo PATH?>/web/js/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="<?php echo PATH?>/web/js/jquery-ui-1.10.3.custom.js"></script>
	<script type="text/javascript" src="<?php echo PATH?>/web/js/jqgrid/jquery.jqGrid.min.js"></script>
	<script type="text/javascript" src="<?php echo PATH?>/web/js/jqgrid/grid.locale-es.js"></script>
</head>

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>

	//-------------GOOGLE MAP---------------------//
	
	function initialize(datos){
		//Ejemplo
		/*
		 		var myCenter=new google.maps.LatLng(-34.6,-58.45);
		var myCenter2=new google.maps.LatLng(-34.66,-58.45);

		var mapProp = {
		  center:myCenter,
		  zoom:10,
		  mapTypeId:google.maps.MapTypeId.ROADMAP
 		};

		var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
		
		var marker=new google.maps.Marker({
	  		position:myCenter,
	  	});
	  
	 	var marker2=new google.maps.Marker({
	  		position:myCenter2,
	  	}); 
	
		marker.setMap(map);
		marker2.setMap(map);
		
		var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });
		 */
		var centros = new Array();
		var marcas = new Array();
		var mensajes = new Array();
		var latitud = null;
		var longitud = null;
		var map = null;
		var centroPuesto = false;
		var hayInfoPos = false;
		for(var i = 0; i < datos.length; i++){
			latitud = datos[i].latitud;
			longitud = datos[i].longitud;
			if(latitud != null && longitud != null){
				hayInfoPos = true;
				centros[i] = new google.maps.LatLng(latitud,longitud);
				if(!centroPuesto){
					centroPuesto = true;
					var mapProp = {
		  				center:centros[i],
		  				zoom:11,
		  				mapTypeId:google.maps.MapTypeId.ROADMAP
 					};
 					
 					map = new google.maps.Map(document.getElementById("googleMap"),mapProp);	
				}
				
				marcas[i] = new google.maps.Marker({
	  				position:centros[i],
	  				
	  			});
	  			
	  			marcas[i].setMap(map);
	  			
	  			var pos = new google.maps.LatLng(parseFloat(latitud) + 0.0001,longitud);
				mensajes[i] = new google.maps.InfoWindow({
        			map: map,
       	 			position: pos,
			        content: datos[i].nombreApell
			    });	
			}
		}
		if(!hayInfoPos){
			mostrarMsj("Tecnico","INFO","No hay información sobre la posición de los técnicos");
		}
	}
	
	function cargarMapa(datos){
		if(datos.length > 0){
			google.maps.event.addDomListener(window, 'load', initialize(datos));	
		}else{
			mostrarMsj("Tecnico","INFO","No hay técnicos disponibles para mostrar");
		}
			
	}
	
	//-------------GOOGLE MAP FIN---------------------//
	//-------------GRILLA---------------------//
	jQuery(document).ready(function () {
		jQuery("#dataTable").jqGrid({
	   	url:'../tecnico/listarEstadoJson',
		datatype: "json",
	   	colNames:[
			'idTecnico',
			'Nombre y Apell',
			'Tareas asignadas',
			'Tareas pendientes de aceptar',
			'Duración',
			'Estado'
		],
		colModel :[
            {
            	name:'idTecnico',
            	index:'idTecnico',
            	hidden:true
            },
            {
            	name:'nombreApell',
            	index:'nombreApell',
            	width:'60',
            	align:'center'
            },
            {
            	name:'cantTareasAcep',
            	index:'cantTareasAcep',
            	width:'30',
            	align:'center'
            },
            {
            	name:'cantTareasPend',
            	index:'cantTareasPend',
            	width:'40',
            	align:'center'
            },
            {
            	name:'duracion',
            	index:'duracion',
            	width:'20',
            	align:'center'
            },
            {
            	name:'estado',
            	index:'estado',
            	width:'30',
            	align:'center'
            }
       	],
       	jsonReader: {
        	root: 'gridModel',
	      	id: 'idTecnico',
	      	repeatitems: false,
	      	page:  function(obj) { return obj.page; },
	        total: function(obj) { return obj.total; },
	        records: function(obj) { return obj.records; }
     	},
     	height: "auto",
        width: 850,
	   	rowNum:10,
	   	rowList:[10,20,30],
	   	pager: '#dataTablePager',
	   	sortname: 'idTecnico',
	    viewrecords: true,
	    sortorder: "desc",
	    loadComplete:function(data){
	    	cargarMapa(data.gridModel); 
	    },
	    editurl: '../tecnico/administrar',
	    caption:"Tecnicos"
		});
		
		jQuery("#dataTable").jqGrid('navGrid','#dataTablePager',
			{edit:false,add:false,del:false,search:false,refresh:false,view:true},
			{}, //  default settings for edit
			{}, //  default settings for add
			{},  // delete instead that del:false we need this
			{}, // search options
			{} /* view parameters*/
        	);
        	
        // MENSAJES
		$(".message").click(function () {
	 		$(this).fadeOut();
	 	});
	
	});
	
	function mostrarMsj(selector,tipoMsj,msj){
		$("#msj"+tipoMsj+selector+" span").html("<b>"+tipoMsj+"</b>:"+msj);
		$("#msj"+tipoMsj+selector+".message").fadeIn("slow");
    }
</script>
</head>

<body>
<?php
	require 'web/pages/commons/header.php';
	?>
	<div class="message blue" id="msjINFOTecnico" style="width: 900px;display:none; margin-left: 45px;margin-top: 10px;">
		<span></span>
 	</div>
	<div id="dataInfo" style="float:left; width: 860px; margin-top: 10px;margin-left: 80px;">
		<table id="dataTable" ></table>
		<div id="dataTablePager"></div>
	</div>	
	<div id="googleMap" style="float:left; width:850px;height:450px; margin-left: 80px;margin-top: 20px;"></div>
</body>
</html>
